<template>
  <div class="main">
    <search v-show="false" @search="search"></search>
    <div v-show="false" class="header">
      <van-tabs v-model="catLogIndex" @change="doGetList()">
        <van-tab v-for="item in catlog" v-bind:key="item.key" :title="item.name"></van-tab>
      </van-tabs>
      <ul>
        <li
          @click="conClick(item)"
          v-for="(item) in condition"
          :key="item.id"
          :style="{'flex':item.name.length}"
          :class="{'active':item.sel,'border':conIndex>0 && conIndex!=item.id}"
        >
          {{item.name}}
          <i class="iconfont" :class="{'icon-jiantou32':item.sel,'icon-jiantou31':!item.sel}"></i>
          <b></b>
        </li>
      </ul>
      <div class="content" v-show="false">
        <div>
          <div v-show="conIndex==1">
            <div class="list-wrap">
              <h5></h5>
              <ul class="list">
                <li
                  v-for="item in s_cd"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
              <h5>类型</h5>
              <ul class="list">
                <li
                  v-for="item in s_lx"
                  :key="item.key"
                  @click="item.sel = !item.sel"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
            </div>
            <div class="btns">
              <div class="left" @click="clear1">清空</div>
              <div class="right" @click="done1">完成</div>
            </div>
          </div>
          <div v-show="conIndex==2">
            <div class="list-wrap">
              <h5>颜色级</h5>
              <ul class="list">
                <li
                  v-for="item in s_ysj"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
              <h5>长度</h5>
              <div class="range">
                <input type="text" id="t_cd" value>
              </div>
              <h5>强力</h5>
              <div class="range">
                <input type="text" id="t_ql" value>
              </div>
              <h5>马克隆值</h5>
              <div class="range">
                <input type="text" id="t_mkl" value>
              </div>
              <h5>回潮</h5>
              <div class="range">
                <input type="text" id="t_hc" value>
              </div>
              <h5>平均含杂</h5>
              <div class="range">
                <input type="text" id="t_pjhz" value>
              </div>
              <h5>整齐度</h5>
              <div class="range">
                <input type="text" id="t_zqd" value>
              </div>
            </div>
            <div class="btns">
              <div class="left" @click="clear1">清空</div>
              <div class="right" @click="done1">完成</div>
            </div>
          </div>
          <div v-show="conIndex==3">
            <div class="list-wrap">
              <h5></h5>
              <ul class="list" v-show="catLogIndex==0">
                <li
                  v-for="item in s_jhd1"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
              <ul class="list" v-show="catLogIndex==1 || catLogIndex==0">
                <li
                  v-for="item in s_jhd2"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
              <ul class="list" v-show="catLogIndex==1 || catLogIndex==0">
                <li
                  v-for="item in s_jhd3"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
              <ul class="list" v-show="catLogIndex==2">
                <li
                  v-for="item in s_jkjhd"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
              <ul class="list" v-show="catLogIndex==3">
                <li
                  v-for="item in s_jkjhd2"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
            </div>
            <div class="btns">
              <div class="left" @click="clear1">清空</div>
              <div class="right" @click="done1">完成</div>
            </div>
          </div>
          <div v-show="conIndex==4">
            <div class="list-wrap">
              <h5></h5>
              <ul class="list">
                <li
                  v-for="item in s_jyms"
                  @click="item.sel = !item.sel"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
            </div>
            <div class="btns">
              <div class="left" @click="clear1">清空</div>
              <div class="right" @click="done1">完成</div>
            </div>
          </div>
          <div v-show="conIndex==5">
            <div class="list-wrap">
              <h5>供货商</h5>
              <ul class="list ghs">
                <li v-for="item in s_ghs" @click="getGHS(item)" :key="item">{{item}}</li>
              </ul>
              <ul class="order">
                <li
                  v-for="item in s_px"
                  @click="selOrder(item)"
                  :key="item.key"
                  :class="{'sel':item.sel}"
                >{{item.name}}</li>
              </ul>
              <ul class="entList">
                <li
                  v-for="(item) in EntList"
                  :class="{'sel':item.sel}"
                  :key="item.ID"
                  @click="selEnt(item)"
                >{{item.EntName}}</li>
              </ul>
            </div>
            <div class="btns">
              <div class="left" @click="clear1">清空</div>
              <div class="right" @click="done1">完成</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="conIndex>0" @click="hideCon"></div>
    <div class="batchlist" ref="batchlist">
      <van-list v-model="loading" :finished="finished" @load="infinite">
        <batch v-for="(item,index) in batchList" :batch="item" :key="index"></batch>
      </van-list>
      <div v-show="showNoData" class="nodata">
        <div>没有更多记录了</div>
      </div>
    </div>
  </div>
</template>

<script>
import batch from "@/components/batch";
import search from "@/components/search";
import api from "@/api/api";
import { Toast } from "vant";
export default {
  data() {
    return {
      clientHeight: "",
      isLoading: false,
      showNoData: false,
      pageIndex: 1,
      pageSize: 20,
      count: 0,
      batchList: [],
      loading: false,
      finished: false,
      EntList: [],
      EntID: "",
      catlog: [
        {
          name: "新疆棉",
          key: "1"
        },
        {
          name: "地产棉",
          key: "2"
        },
        {
          name: "进口棉¥",
          key: "3"
        },
        {
          name: "进口棉$",
          key: "4"
        },
        {
          name: "拍储棉",
          key: "5"
        }
      ],
      catLogIndex: 0,
      conIndex: 0,
      condition: [
        {
          name: "产地",
          id: 1,
          sel: false
        },
        {
          name: "质量",
          id: 2,
          sel: false
        },
        {
          name: "交货地",
          id: 3,
          sel: false
        },
        {
          name: "交易模式",
          id: 4,
          sel: false
        },
        {
          name: "排序",
          id: 5,
          sel: false
        }
      ],
      s_cd: [
        {
          name: "南疆地方",
          key: "66",
          sel: false
        },
        {
          name: "南疆兵团",
          key: "65",
          sel: false
        },
        {
          name: "北疆地方",
          key: "64",
          sel: false
        },
        {
          name: "北疆兵团",
          key: "63",
          sel: false
        },
        {
          name: "东疆地方",
          key: "62",
          sel: false
        },
        {
          name: "东疆兵团",
          key: "61",
          sel: false
        }
      ],
      s_lx: [
        {
          name: "手摘棉",
          key: "1",
          sel: false
        },
        {
          name: "机采棉",
          key: "2",
          sel: false
        },
        {
          name: "皮辊棉",
          key: "3",
          sel: false
        },
        {
          name: "长绒棉",
          key: "4",
          sel: false
        }
      ],
      s_ysj: [
        {
          name: "11",
          key: "1",
          sel: false
        },
        {
          name: "21",
          key: "2",
          sel: false
        },
        {
          name: "31",
          key: "3",
          sel: false
        },
        {
          name: "41",
          key: "4",
          sel: false
        },
        {
          name: "51",
          key: "5",
          sel: false
        },
        {
          name: "12",
          key: "6",
          sel: false
        },
        {
          name: "22",
          key: "7",
          sel: false
        },
        {
          name: "32",
          key: "8",
          sel: false
        },
        {
          name: "13",
          key: "9",
          sel: false
        },
        {
          name: "23",
          key: "10",
          sel: false
        },
        {
          name: "33",
          key: "11",
          sel: false
        },
        {
          name: "14",
          key: "12",
          sel: false
        },
        {
          name: "24",
          key: "13",
          sel: false
        }
      ],
      s_jhd1: [
        {
          name: "南疆",
          key: "66",
          sel: false
        },
        {
          name: "北疆",
          key: "65",
          sel: false
        },
        {
          name: "东疆",
          key: "64",
          sel: false
        }
      ],
      s_jkjhd2: [
        {
          name: "保税仓库交货",
          key: "1",
          sel: false
        },
        {
          name: "海运在途",
          key: "2",
          sel: false
        },
        {
          name: "原产地装运",
          key: "3",
          sel: false
        }
      ],
      s_jhd2: [
        {
          name: "江苏",
          key: "1",
          sel: false
        },
        {
          name: "上海",
          key: "2",
          sel: false
        },
        {
          name: "浙江",
          key: "3",
          sel: false
        },
        {
          name: "安徽",
          key: "4",
          sel: false
        },
        {
          name: "福建",
          key: "5",
          sel: false
        },
        {
          name: "湖北",
          key: "6",
          sel: false
        }
      ],
      s_jhd3: [
        {
          name: "湖南",
          key: "1",
          sel: false
        },
        {
          name: "江西",
          key: "2",
          sel: false
        },
        {
          name: "四川",
          key: "3",
          sel: false
        },
        {
          name: "山东",
          key: "4",
          sel: false
        },
        {
          name: "河南",
          key: "5",
          sel: false
        },
        {
          name: "河北",
          key: "6",
          sel: false
        },
        {
          name: "山西",
          key: "7",
          sel: false
        },
        {
          name: "天津",
          key: "8",
          sel: false
        }
      ],
      s_jkjhd: [
        {
          name: "美国",
          key: "1",
          sel: false
        },
        {
          name: "澳洲",
          key: "2",
          sel: false
        },
        {
          name: "印度",
          key: "3",
          sel: false
        },
        {
          name: "墨西哥",
          key: "4",
          sel: false
        },
        {
          name: "巴西",
          key: "5",
          sel: false
        },
        {
          name: "希腊",
          key: "6",
          sel: false
        },
        {
          name: "西班牙",
          key: "7",
          sel: false
        },
        {
          name: "乌棉",
          key: "8",
          sel: false
        },
        {
          name: "中亚棉",
          key: "9",
          sel: false
        },
        {
          name: "西非",
          key: "10",
          sel: false
        },
        {
          name: "埃及",
          key: "11",
          sel: false
        },
        {
          name: "其他",
          key: "12",
          sel: false
        }
      ],
      s_jyms: [
        {
          name: "现价成交",
          key: "1",
          sel: false
        },
        {
          name: "期货点价",
          key: "2",
          sel: false
        },
        {
          name: "远期交货",
          key: "3",
          sel: false
        }
      ],
      s_ghs: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      s_px: [
        {
          name: "特价",
          key: "1",
          sel: false
        },
        {
          name: "已售",
          key: "2",
          sel: false
        },
        {
          name: "预售",
          key: "3",
          sel: false
        },
        {
          name: "挂单",
          key: "4",
          sel: false
        },
        {
          name: "保留",
          key: "5",
          sel: false
        }
      ],
      batchNo: ""
    };
  },
  components: {
    batch,
    search
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function() {
      this.changeFixed(this.clientHeight);
    }
  },
  mounted() {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`; //document.body.clientWidth;
    //console.log(self.clientHeight);
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
    };
     
  },
  methods: {
    share() {
      var desc = "聚棉网特价资源推荐";
      var link =
        "https://www.icottontrade.com/%23/baojia/" + this.$route.params.id;
      var url =
        "https://www.icottontrade.com/cot/redirect/batchMatch?id=" +
        this.$route.params.id;
      wx.onMenuShareAppMessage({
        title: this.$store.state.userInfo.NickName + "为您推荐",
        desc: desc,
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "https://www.icottontrade.com/cot/upload/logo.jpg", // 自定义图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
          // 用户确认分享后执行的回调函数
          Toast({
            message: "分享成功",
            duration: 1500
          });
        },
        cancel: function() {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareTimeline({
        title: this.$store.state.userInfo.EntName,
        link: window.location.href,
        imgUrl: "https://www.icottontrade.com/cot/upload/logo.jpg" // 自定义图标
      });
    },
    search(batchNo) {
      this.pageIndex = 1;
      this.batchNo = batchNo;
      this.doGetList();
    },
    selEnt(item) {
      var d = this.EntList.find(n => n.sel);
      if (d) {
        d.sel = false;
      }
      this.EntID = item.ID;
      item.sel = true;
    },
    getEntList(PYS) {
      api
        .getEntListByPYS({
          PYS: PYS
        })
        .then(res => {
          res.forEach(n => {
            n.sel = false;
          });
          this.EntList = res;
        });
    },
    getPara() {
      var paraStr = "BatchNo=&showEntID=&pageIndex=1&pageSize=20&CZFS=&madeIn=&nColorgd=不限&nColorgd_J=&nAvglength=不限&nAvglength_J=&nAvgintension=不限&nAvgmike=不限%3B不限&nAvgmike_J=&nTrash=不限&nAvgrd=不限&SellProvince=&JHFS=&SellType=&EntID=&Status=0&BatchType=1&SellStorage=".split('&');
      var para = {};
      paraStr.forEach(n=>{
        var k = n.split('=');
        para[k[0]] = k[1];
      })
      para.nAvgmike = "不限;不限";
      para.BatchType = 0;
      para.isRec = 1;
      para.pageIndex = this.pageIndex;
      console.log(para)

      return para;
    },
    doGetList() {
      this.pageIndex = 1;
      this.showNoData = false;
      api.getBatchList(this.getPara()).then(res => {
        this.batchList = res.data;
        this.count = res.count;
        this.isLoading = false;
        if (this.count) {
          Toast({
            message:
              "已加载 " +
              (this.count < this.pageSize ? this.count : this.pageIndex * 20) +
              "/" +
              this.count +
              " 条记录",
            position: "bottom",
            duration: 1500
          });
        } else {
          Toast({
            message: "未查询到记录",
            position: "bottom",
            duration: 1500
          });
          this.showNoData = true;
        }
      });
    },
    refresh() {
      this.$refs.my_scroller.finishPullToRefresh();
      Toast({
        message: "刷新成功",
        position: "bottom",
        duration: 1500
      });
      this.doGetList();
    },
    infinite() {
      let self = this; //this指向问题
      api.getBatchList(this.getPara()).then(res => {
        res.data.forEach(d => {
          this.batchList.push(d);
        });
        this.count = res.count;
        Toast({
          message:
            "已加载 " +
            (this.count < this.pageSize ? this.count : this.pageIndex * 20) +
            "/" +
            this.count +
            " 条记录",
          position: "bottom",
          duration: 1500
        });        
        this.loading = false;
        if (res.data.length) {
          this.pageIndex++;
         } else {
          this.finished = true;
          Toast({
            message: "已加载全部记录",
            position: "bottom",
            duration: 1500
          });
          this.loading = false;
          this.showNoData = true;
          return;
        }
      });
    },
    changeFixed(clientHeight) {
      //动态修改样式
      this.$refs.batchlist.style.height = clientHeight + "px";
    },
    selOrder(item) {
      var d = this.s_px.find(n => n.sel == true);
      if (d != null) {
        d.sel = false;
      }
      item.sel = true;
    },
    getGHS(key) {
      this.getEntList(key);
    },
    done1() {
      this.condition.forEach(n => {
        n.sel = false;
      });
      this.conIndex = 0;
      this.doGetList();
    },
    clear1() {
      window.location.reload();
      // this.s_cd.forEach(n => {
      //     n.sel = false;
      // });
      // this.s_lx.forEach(n => {
      //     n.sel = false;
      // });
    },
    conClick(item) {
      var d = this.condition.find(n => n.sel == true);
      if (!item.sel && d != null) {
        d.sel = false;
      }
      item.sel = !item.sel;
      if (item.sel) {
        this.conIndex = item.id;
      } else {
        this.conIndex = 0;
      }
    },
    hideCon() {
      var d = this.condition.find(n => n.sel == true);
      if (d != null) {
        d.sel = false;
        this.conIndex = 0;
      }
    }
  },
  created() {
      this.share();
  }
};
</script>

<style scoped lang='less'>
.main {
  .batchlist {
    height: 480px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    .nodata {
      padding-top: 20px;
      line-height: 2em;
      color: #999;
    }
  }
  .mask {
    position: absolute;
    top: 200px;
    width: 100%;
    height: 68%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }
  .header {
    position: relative;
    .range {
      padding: 5px 20px;
    }
    .list {
      text-align: left;
      margin-top: 10px;
      li {
        display: inline-block;
        background: #f0f0f0;
        width: 20%;
        font-size: 12px;
        text-align: center;
        line-height: 2em;
        height: 2em;
        border: 1px solid #ccc;
        margin-right: 1em;
        margin-bottom: 5px;
        color: #000;
        cursor: pointer;
      }
      .sel {
        background: #2cb98e;
        color: #fff;
        border-color: #2cb98e;
      }
    }
    .ghs {
      width: 80%;
      li {
        width: 16% !important;
        background: #fff;
        color: #2dbaba;
        border: none;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
        margin-right: 0;
        line-height: 1.5em;
        height: 1.5em;
      }
    }
    .order {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 14px;
      li {
        display: block;
        line-height: 2em;
        border-bottom: 1px solid #f0f0f0;
      }
      .sel {
        color: #2dbaba;
      }
    }
    .content {
      > div {
      }
      .list-wrap {
        min-height: 200px;
        max-height: 300px;
        overflow-y: scroll;
        padding: 0 10px 50px 10px;
      }
      .entList {
        min-height: 10em;
        li {
          text-align: left;
          padding-left: 10px;
          height: 2em;
        }
        .sel {
          color: #2cb98e;
        }
      }
      position: absolute;
      top: 87px;
      width: 100%;
      background: #fff;
      z-index: 9;
      .btns {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 20px 0;
        height: 2.5em;
        background: #fff;
        z-index: 999;
        overflow: hidden;
        text-align: center;
        > div {
          width: 30%;
          background: #2cb98e;
          color: #fff;
          font-size: 14px;
          height: 2em;
          line-height: 2em;
          margin-left: 20px;
          display: inline-block;
        }
      }
      h5 {
        text-align: left;
        margin-top: 1em;
      }
    }
    i {
    }
    .active {
      color: #2cb98e;
    }
    > ul {
      background: #fff;
      border-bottom: 1px solid #ccc;
      display: flex;
      li {
        display: inline-block;
        padding: 0 5px;
        min-width: 15%;
        flex: 1;
        height: 3em;
        line-height: 3em;
        font-size: 14px;
        border-bottom: 1px solid #fff;
        position: relative;
        text-align: center;
        b {
          width: 1px;
          background: #f0f0f0;
          height: 2.5em;
          display: block;
          position: absolute;
          right: 0;
          top: 0.5em;
        }
      }
      li:last-child {
        b {
          display: none;
        }
      }
      .border {
        border-color: #f0f0f0;
      }
    }
  }
}
</style>